<template>
  <div class="constellationContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="constellationMain">
      <el-card style="background: black;">
        <div class="content">
          <img src="@/assets/imgs/constellation.jpg" style="opacity: 0.8;" alt="">
          <div class="right">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
              <el-form-item style="margin-top: 20px;" label="查询日期：" prop="time">
                <el-date-picker
                  v-model="form.time"
                  @change="changeTime"
                  type="date"
                  placeholder="请输入要查看的日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :default-value="new Date(2023, 10, 1)"
                  style="width: 200px;margin-right: 10px;"
                />
                <el-button type="warning" style="background-color: #9273ed;border: #9273ed;" @click="seachConstellation">查询星座</el-button>
              </el-form-item>
              <el-form-item style="margin-top: 20px;" label="选择星座：" prop="constellation">
                <el-select v-model="form.constellation" placeholder="请选择星座" @change="changeC" :no-data-text="'无数据'" style="width: 200px;margin-right: 10px;">
                  <el-option
                    v-for="(item, index) in constellationList"
                    :key="index"
                    :label="(item.name as string)"
                    :value="(item.value as string)"
                    style="padding-left: 10px;padding-top: 8px;"
                  >
                  </el-option>
                </el-select>
                <el-button type="warning" style="background-color: #9273ed;" @click="constellationToday">今日运势</el-button>
                <el-button type="info" @click="reset">重置页面</el-button>
              </el-form-item>
            </el-form>
            <div class="constellationNoInfo" v-if="constell">
              <SvgIcon width="100px" height="100px" name="constell" color="#9273ed"></SvgIcon>
              <h2 style="margin-top: 15px;font-weight: 700;font-size: 20px;color: #9273ed;">请选择星座进行查询</h2>
            </div>
            <div class="constellationInfo" v-else>
              <div class="infoLeft">
                <div class="infoLeftNumber">
                  <p style="font-size: 28px;font-weight: 700;">{{ form.number }}</p>
                  <p>今日运势</p>
                </div>
                <p style="color: #9273ed;font-weight: 900;font-size: 18px;margin-bottom: 5px;">
                  {{ form.title }}·今日运势
                </p>
                <p style="margin-bottom: 5px;">
                  <span style="font-weight: 700;">综合运势：</span>
                  <span v-for="(star, index) in constellationDayAll.summary_star" :key="index" style="">
                    <SvgIcon width="18px" height="18px" name="star" color="rgb(248,216,82)"></SvgIcon>
                  </span>
                </p>
                <p style="margin-bottom: 5px;">
                  <span style="font-weight: 700;">爱情运势：</span>
                  <span v-for="(star, index) in constellationDayAll.love_star" :key="index" style="">
                    <SvgIcon width="18px" height="18px" name="star" color="rgb(248,216,82)"></SvgIcon>
                  </span>
                </p>
                <p style="margin-bottom: 5px;">
                  <span style="font-weight: 700;">事业运势：</span>
                  <span v-for="(star, index) in constellationDayAll.work_star" :key="index" style="">
                    <SvgIcon width="18px" height="18px" name="star" color="rgb(248,216,82)"></SvgIcon>
                  </span>
                </p>
                <p style="margin-bottom: 5px;">
                  <span style="font-weight: 700;">财富运势：</span>
                  <span v-for="(star, index) in constellationDayAll.money_star" :key="index" style="">
                    <SvgIcon width="18px" height="18px" name="star" color="rgb(248,216,82)"></SvgIcon>
                  </span>
                </p>
                <p style="margin-bottom: 5px;">
                  <span style="font-weight: 700;">吉时：</span>
                  {{ constellationDayAll.lucky_time }}
                </p>
                <p style="margin-bottom: 5px;">
                  <span style="font-weight: 700;">吉利方位：</span>
                  {{ constellationDayAll.lucky_direction }}
                </p>
                <p style="margin-bottom: 5px;">
                  <span>速配星座：{{ constellationDayAll.grxz }}</span>&nbsp;
                  <span>幸运数字：{{ constellationDayAll.lucky_num }}</span>&nbsp;
                  <span>幸运颜色：{{ constellationDayAll.lucky_color }}</span>&nbsp;
                </p>
              </div>
              <div class="infoRight">
                <p style="margin-bottom: 8px;">
                  <span style="font-weight: 900;font-size: 16px;color: pink;">今日提醒：</span>
                  <p style="margin-top: 5px;">
                    {{ constellationDayAll.day_notice }}
                  </p>
                </p>
                <p style="margin-bottom: 8px;">
                  <span style="font-weight: 900;font-size: 16px;color: pink;">综合运势：</span>
                  <p style="margin-top: 5px;">
                    {{ constellationDayAll.general_txt }}
                  </p>
                </p>
                <p style="margin-bottom: 8px;">
                  <span style="font-weight: 900;font-size: 16px;color: pink;">爱情运势：</span>
                  <p style="margin-top: 5px;">
                    {{ constellationDayAll.love_txt }}
                  </p>
                </p>
                <p style="margin-bottom: 8px;">
                  <span style="font-weight: 900;font-size: 16px;color: pink;">事业运势：</span>
                  <p style="margin-top: 5px;">
                    {{ constellationDayAll.work_txt }}
                  </p>
                </p>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { FormRules, FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { seachConstellationValue } from '@/utils/plugins'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()

const formRef = ref<FormInstance>()
const form = ref<any>({
  time: '',
  title: '',
  constellation: '',
  number: ''
})
const constellationDayAll = ref<any>([])

const constell = ref<boolean>(true)

const constellationList = ref<any>([
  {name: '白羊座',value: 'baiyang'},
  {name: '金牛座',value: 'jinniu'},
  {name: '双子座',value: 'shuangzi'},
  {name: '巨蟹座',value: 'juxie'},
  {name: '狮子座',value: 'shizi'},
  {name: '处女座',value: 'chunv'},
  {name: '天秤座',value: 'tiancheng'},
  {name: '天蝎座',value: 'tianxie'},
  {name: '射手座',value: 'sheshou'},
  {name: '摩羯座',value: 'mojie'},
  {name: '水瓶座',value: 'shuiping'},
  {name: '双鱼座',value: 'shuangyu'},
])

const changeC = (value: string) => {
  constell.value = true
  form.value.constellation = value
  constellationList.value.forEach((item: any) => {
    if (item.value == value) {
      form.value.title = item.name
    }
  }) 
}

const rules = ref<FormRules>({
  time: [{ required: true, message: '请输入要查询的日期', trigger: ['change', 'blur'] }],
  constellation: [{ required: true, message: '请选择要查询的星座', trigger: ['change', 'blur'] }],
})

const changeTime =() => {
  console.log('time', form.value.time)
}

const reqConstellationInfo = (data: any) => request.post<any, any>(`https://route.showapi.com/872-1?showapi_appid=1505398&showapi_sign=38a5f6fb1abe4355bc2f0d5435372138&data=0424&star=${form.value.constellation}`, data)
const constellationToday = () => {
  if (form.value.constellation == '') {
    ElMessage({
      type: 'warning',
      message: '请先选择要查询的星座'
    })
    return
  }
  reqConstellationInfo({
    date: '',
    // showapi_appid: '1505398', //这里需要改成自己的appid
    // showapi_sign: '38a5f6fb1abe4355bc2f0d5435372138',  //这里需要改成自己的应用的密钥secret
    star: '',
    needTomorrow: '0',
    needWeek: '0',
    needMonth: '0',
    needYear: '0',
  }).then(res => {
    console.log('res', res)
    if (res.showapi_res_body.ret_code == 0) {
      constell.value = false
      constellationDayAll.value = res.showapi_res_body.day
      form.value.number = getNumber(res.showapi_res_body.day.summary_star, res.showapi_res_body.day.love_star, res.showapi_res_body.day.work_star, res.showapi_res_body.day.money_star)
    } else {
      ElMessage({
        type: 'error',
        message: res.showapi_res_body.remark
      })
    }
  })
}

onMounted(() => {

})

const reset = () => {
  form.value.time = ''
  form.value.title = ''
  form.value.constellation = ''
  constell.value = true
}

const getNumber = (summary_star: number, love_star: number, work_star: number, money_star: number) => {
  const num = (summary_star / 5 + love_star / 5 + work_star / 5 + money_star / 5) / 4
  return Math.floor(num * 100)
}

const seachConstellation = () => {
  if (form.value.time == '') {
    ElMessage({
      type: 'warning',
      message: '请先选择日期'
    })
    return
  }
  const a = form.value.time.split('-')[1]
  const b = form.value.time.split('-')[2]
  ElMessage({
    type: 'warning',
    message: `所选择的日期为：${seachConstellationValue(a, b)}`
  })
}

</script>

<style lang="scss" scoped>
.constellationContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .constellationMain {
    margin-top: 20px;
    padding: 20px;

    .el-card {
      border-radius: 16px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);

      .content {
        width: 100%;
        height: 380px;
        display: flex;
        .left {
          img {
            width: 100%;
            height: 100%;
          }

        }

        .right {
          width: 100%;
          display: flex;
          flex-direction: column;
          height: 100%;
          .constellationNoInfo {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
          .constellationInfo {
            display: flex;
            flex-direction: row;
            margin-top: 15px;
            padding: 15px;
            font-size: 14px;
            overflow-y: auto;
            .infoLeft {
              flex: 1;
              display: flex;
              flex-direction: column;
              padding: 10px;
              border: 0.1px solid pink;
              justify-content: space-between;
              position: relative;
              .infoLeftNumber {
                position: absolute;
                right: 40px;
                top: 30px;
                width: 80px;
                height: 80px;
                border-radius: 50%;
                border: 6px solid #d6c6f3;
                background-color: #9273ed;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-weight: 500;
                font-size: 10px;
                color: #FFF;
              }
            }
            .infoRight {
              flex: 1;
              margin-left: 10px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            }
          }
        }
      }
    }
  }

}
</style>